@charset 'utf-8';
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html, body{
	width: 100%;
}
%bdw{
	border: 1px solid #999;
}
%padding{
	padding: 10px;
	float: left;
}
%height{
	height: 50px;
}
%bg{
	background: #eee;
}
%width{
	width: 100%;
}
@for $i from 1 to 13{
	@each $key in md, sm{
		.row .col-#{$key}-#{$i}{
			@extend %padding;
		}
	}
	
}
@each $key in row, inner{
	.#{$key}{
		@extend %width;
	}
	@if $key == inner{
		.#{$key}{
			@extend %bdw, %bg, %height;
		}
		
	}
}

@media screen and (min-width:769px){
	@for $i from 1 to 13{
		.col-md-#{$i}{
			width: (100% / 12 * $i);
		}
	}
}
@media screen and (max-width:768px){
	@for $i from 1 to 13{
		.col-sm-#{$i}{
			width: (100% / 12 * $i);
		}
	}
}